<template>
  <footer class="footer">
    <span class="todo-count">
      <strong></strong> {{ unDoneNumber }} item left
    </span>
    <ul class="filters">
      <li>
        <a
          href=""
          :class="{ selected: store.visibility == 'all' }"
          @click.prevent="changeVisibility('all')"
          >All</a
        >
      </li>
      <li>
        <a
          href=""
          :class="{ selected: store.visibility == 'active' }"
          @click.prevent="changeVisibility('active')"
          >Active</a
        >
      </li>
      <li>
        <!-- :class="{ selected: visibility == 'Completed'} -->
        <a
          href=""
          :class="{ selected: store.visibility == 'completed' }"
          @click.prevent="changeVisibility('completed')"
          >Completed</a
        >
      </li>
    </ul>
    <button
      @click="delAllDone"
      class="clear-completed"
      v-show="todoList.length > unDoneNumber"
    >
      Clear completed
    </button>
  </footer>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import useTodoStore from '../stores/todo';
import type { TodoListType } from '@/hooks/model/todoModel';
let store = useTodoStore();

// defineProps({
//   unDoneNumber: {
//     type: Number,
//     default: 0,
//   },
//   todoList: {
//     type: Array,
//     default: [],
//   },
// });

withDefaults(
  defineProps<{
    todoList: TodoListType;
    unDoneNumber: number;
  }>(),
  {
    todoList: () => [],
    unDoneNumber: 0,
  }
);

const changeVisibility = (vsb: string) => {
  store.changeVisibility(vsb);
};
const delAllDone = () => {
  store.delAllDone();
};
</script>
